<script>
import request from "@/utils/request";
import Logo from "../components/Logo.vue";
import Footer from "../components/Footer.vue";

export default {
  name: "LoginView",
  components: {
    Logo,
    Footer
  },
  created() {
    document.title = '欢迎注册';
  },
  data() {
    return {
      // 提交的表单
      form: {
      }
    }
  },
  methods: {
    routeLogin() {
      this.$router.push("/login")
    },
    register() {
      // 验证两次密码是否一致
      if (this.form.password !== this.form.confirm) {
        this.$message({
          type: "error",
          message: "两次密码不一致",
        });
        return
      }
      request.post('/user/register', this.form).then(res => {
        if (res.code === '0') {
          this.$message({
            type: 'success',
            message: "注册成功,请重新登录",
          });
          // 跳转登录页
          this.$router.push('/');
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
      })
    }
  }
}
</script>

<template>
  <div class="template-root">
    <header>
      <div class="header-container">
        <div class="logo-wrapper">
          <Logo />
          <span class="welcome-tip">欢迎注册</span>
        </div>
        <span class="login-wrapper">已有账号？<a href="#" @click.prevent="routeLogin" class="login-link">立即登录</a></span>
      </div>
    </header>
    <main>
      <div class="body-container">
        <el-form label-width="120px">
          <el-form-item label="手机号">
            <el-input />
          </el-form-item>
          <el-form-item label="图形验证码">
            <el-input />
          </el-form-item>
          <el-form-item label="短信验证码">
            <el-input />
          </el-form-item>
          <el-form-item label="输入密码">
            <el-input />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input />
          </el-form-item>
          <el-form-item>
            <el-button class="regist-btn">同意条款并注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </main>
    <Footer />
  </div>
</template>

<style scoped>
.template-root {
  height: 100%;
}

header {
  display: flex;
  height: 90px;
  justify-content: center;
  align-items: center;
}

.login-wrapper {
  color: #c8c8c8;
  font-size: 1em;
}

.login-link {
  color: black;
}

.login-link:hover {
  color: red;
  background-color: white;
}

.body-container {

  .el-input,
  .el-button {
    width: 300px;
  }
}

.regist-btn {
  width: 100%;
}

.body-container {
  width: 30%;
  margin-left: 20%;
  padding-top: 50px;
}

main {
  display: flex;
  margin: 0 auto;
  height: calc(100% - 190px);
  background-image: url('../assets/regist-bg.jpg');
}

.logo-wrapper {
  width: 60%;
}

.header-container {
  width: 60%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.welcome-tip {
  margin-left: 20px;
}
</style>